<template>
	<view v-if="_width != '0px' && _width != '0%'" :style="[_width ? { width: _width } : '']" class="flex flex-row flex-row-top-start py-6">
		<view :style="[labelWidth ? { width: labelWidth + 'rpx' } : '']" class="flex-shrink">
			<tm-text _class="opacity-7" :font-size="_fontSize" :label="props.label"></tm-text>
		</view>
		<view class="flex-1 wrap" :style="{ width: '0px' }">
			<slot><tm-text :color="props.color" _class="px-16" :font-size="_fontSize" :label="props.value"></tm-text></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import tmText from '../tm-text/tm-text.vue'
import { computed, inject } from 'vue'
const _width: string = inject('tmDescriptionsItem', '')
const labelWidth: string = inject('tmDescriptionsLabelWidth', '')
const props = defineProps({
	label: {
		type: String,
		default: ''
	},
	value: {
		type: String,
		default: ''
	},
	color: {
		type: String,
		default: ''
	},
	fontSize: {
		type: Number,
		default: 23
	}
})
const _fontSize = computed(() => props.fontSize)
</script>

<style></style>
